﻿<MContainer>
    <MCard Class="mx-auto mt-6"
           Width="344">
        <MSystemBar>
            <MSpacer></MSpacer>
            <MIcon>mdi-square</MIcon>
            <MIcon>mdi-circle</MIcon>
            <MIcon>mdi-triangle</MIcon>
        </MSystemBar>

        <MToolbar>
            <MButton Icon>
                <MIcon>mdi-arrow-left</MIcon>
            </MButton>

            <MToolbarTitle>My Recipes</MToolbarTitle>

            <MProgressLinear Active="_loading"
                            Indeterminate="_loading"
                            Absolute
                            Bottom
                            Color="deep-purple accent-4">
            </MProgressLinear>

            <MSpacer></MSpacer>

            <MButton Icon>
                <MIcon>mdi-magnify</MIcon>
            </MButton>

            <MButton Icon>
                <MIcon>mdi-dots-vertical</MIcon>
            </MButton>
        </MToolbar>

        <MContainer Style="height: 282px;">
            <MRow Class="fill-height"
                  Align="AlignTypes.Center"
                  Justify="JustifyTypes.Center">
				<ScaleTransition>
					<ShowTransitionElement Value="!_loading" Class="text-center">
						<MButton Color="primary" OnClick="()=>Loading(true)">
                        Start loading
                    </MButton>
					</ShowTransitionElement>
				</ScaleTransition>
            </MRow>
        </MContainer>
    </MCard>
</MContainer>

@code {
    private bool _loading = false;

    private void Loading(bool val)
    {
        if (!val) return;

        _loading = true;

        Task.Run(async () =>
        {
            await Task.Delay(3000);
            _loading = false;

            await InvokeAsync(StateHasChanged);
        });
    }
}

